<template>
  <div class="sort" @click="returnClick">
    <i class="el-icon-sort" />
    <span>{{ title }}</span>
  </div>
</template>
<script>
export default {
  name: 'Sort',
  //   props: ['placeholder']
  props: ['field'],
  data() {
    return {
      title: '升序'
    }
  },
  methods: {
    returnClick() {
      let state
      if (this.title === '升序') {
        state = '2'
        this.title = '降序'
      } else if (this.title === '降序') {
        state = '1'
        this.title = '升序'
      }
      this.$emit('sortClick', [this.field, state])
    }
  }
}
</script>
<style lang="less" scoped>
.sort{
    // border: 1px solid #217dfa;
    display: flex;
    padding: 4px 5px;
    align-items: center;
    box-sizing: border-box;
    border-radius: 3px;
    cursor: pointer;
}
</style>
